{extend name="admin/public/base"}
{block name="x-body"}
<!--pagetitle-->
<div class="row">
    <div class="col-12">
        <div class="page-title-box">
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="#">系统设置</a></li>
                    <li class="breadcrumb-item"><a href="#">商户管理</a></li>
                    <li class="breadcrumb-item active">商户列表</li>
                </ol>
            </div>
            <h4 class="page-title">商户列表</h4>
        </div>
    </div>
</div>
<!--table-->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <button type="button" class="btn btn-primary mb-3"  data-toggle="modal" data-target="#addcontactmodal"> <i class="mdi mdi-account-plus mr-1"></i> Add Contact</button>
                <button type="button" class="btn btn-light float-right d-none d-sm-block ml-2"> <i class="mdi mdi-format-list-bulleted"></i></button>
                <button type="button" class="btn btn-light float-right"> <i class="mdi mdi-filter-variant mr-1"></i> Filter</button>


                <table id="basic-datatable" class="table table-hover dt-responsive nowrap table-centered">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Basic Info</th>
                        <th>Phone</th>
                        <th>Location</th>
                        <th>Created Date</th>
                        <th>Action</th>
                    </tr>
                    </thead>


                    <tbody>
                    <tr>
                        <td><b>#0121</b></td>
                        <td>
                            <img src="__STATIC__/assets/images/users/avatar-2.jpg" alt="contact-img" height="36" title="contact-img" class="rounded-circle float-left mr-2" />
                            <p class="mb-0 font-weight-bold"><a href="javascript: void(0);">George Lanes</a></p>
                            <span class="font-13 d-none d-sm-block">george@examples.com</span>
                        </td>

                        <td>
                            606-467-7601
                        </td>

                        <td>
                            New York
                        </td>

                        <td>
                            2018/04/28
                        </td>

                        <td>
                            <div class="btn-group dropdown">
                                <a href="javascript: void(0);" class="dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-dots-horizontal"></i></a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="#"><i class="mdi mdi-pencil mr-1 text-muted"></i>Edit Contact</a>
                                    <a class="dropdown-item" href="#"><i class="mdi mdi-delete mr-1 text-muted"></i>Remove</a>
                                    <a class="dropdown-item" href="#"><i class="mdi mdi-email mr-1 text-muted"></i>Send Email</a>
                                </div>
                            </div>
                        </td>
                    </tr>

                    </tbody>
                </table>

            </div> <!-- end card-body-->
        </div> <!-- end card -->
    </div> <!-- end col -->
</div>
<script>
    $(document).ready(function (e) {
        $("#basic-datatable").DataTable({
            language: {
                paginate: {
                    previous: "<i class='mdi mdi-chevron-left'>",
                    next: "<i class='mdi mdi-chevron-right'>"
                }
            },
            drawCallback: function () {
                $(".dataTables_paginate > .pagination").addClass("pagination-rounded")
            }
        });
    })
</script>
{/block}